<!--  -->
<script setup>
import { useBreadsStore } from '@/stores'
import RankSwitcher from '@/components/RankSwitcher.vue'
import QuestList from '@/components/QuestList.vue'
import { format } from '@/utils/time'
import { getQuestListWithTagNameAPI } from '@/apis/quest'
import { getTagDetailAPI } from '@/apis/tag'
import { useRouter, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import { us } from '@/utils/userState'

const { setBreadCrumbs } = useBreadsStore()
setBreadCrumbs([{ title: '标签列表', path: '/tags' }, { title: '标签详情' }])

const route = useRoute()
const router = useRouter()
const initOrder = route.query.order || 'newest'
const data = ref([])
const tagInfo = ref(null)

onMounted(() => {
  retrieveData(route.query.order || 'newest')
  getTagDetailAPI(route.params.id)
    .then(res => tagInfo.value = res.data)
    .catch(() => null)
})

const orderType = [
  { title: '最新', order: 'newest' },
  { title: '最热', order: 'hot' },
  { title: '待解决', order: 'unsolved' },
  { title: '已解决', order: 'solved' }
]

function onSwitchOrder(type) {
  router.push({ query: { order: type } })
  retrieveData(type)
}

function retrieveData(order) {

  getQuestListWithTagNameAPI({ pageNo: 0, pageSize: 10, order, tag: route.params.id }).then(res => {
    data.value = res.data.records
  }).catch(() => null)
}
</script>

<template>
  <div v-if="tagInfo" class="view-container">
    <div class="title">{{ tagInfo.displayName }}</div>
    <div class="desc">{{ tagInfo.content }}</div>
    <div class="info">
      <span>创建于 {{ format(tagInfo.createAt, 'YYYY-MM-DD') }}</span>
      <span v-if="tagInfo.updateAt">编辑于{{ format(tagInfo.updateAt, 'YYYY-MM-DD') }}</span>
      <span>共 {{ tagInfo.questionCount }} 个问题</span>
    </div>
    <div v-if="us.isStaff" class="info">
      <span>编辑</span>
      <span>删除</span>
      <span>历史</span>
    </div>
    <div class="flex-between">
      <div>此条件下有 {{ data.length }} 个相关问题</div>
      <RankSwitcher :init-type="initOrder" :order-type="orderType" @on-switch-order="onSwitchOrder" />
    </div>
    <QuestList :data="data"></QuestList>
  </div>
</template>

<style scoped lang="scss">
.view-container {
  min-height: 100%;
  margin-right: 4em;
}

.title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.desc {
  font-size: 1em;
  color: #666;
  margin-bottom: 1em;
}

.info {
  display: flex;
  gap: 20px;
  margin: 1em 0;
}

.flex-between {
  border-bottom: 1px dashed var(--border-secondary);
  padding-bottom: 1em;
}
</style>
